JavaScript Logic in Components

Firat Atalay

5 min read

·

Jun 18

Let’s now take a quick first look at writing logic inside of React components. Now we have already written some JavaScript logic before but we always did it just inside JSX that is returned. So just like here, right? But since components are just JavaScript functions, we can of course do any JavaScript in them that we want. And that code is then simply executed as soon as the function is caught. So as soon as the component is initialized.

So for example, here, we can create any new variable that we want. Let’s say hour, and here I will again create a new date, and then let’s say getHours and then we can log that to the console. And now we’re going to use that snippet for the first time that we set up earlier. So here we can just write cl, hit Enter, and then hour. So, let’s check out our console, and so here, yeah, we have the number 9.

So that’s currently the hour and now what I want to do here is to basically display an alert in the app whether the restaurant is currently open or not. So, let’s define a few more variables for that. So open hour, so let’s say that the pizzeria actually opens at 12:00 PM and closes at 10:00 PM so that’s 12 and 22 for the close hour. So closeHour 22. And so now again, we can use any JavaScript in here.

So let’s just write a simple if else statement saying that if the hour is greater or equal, the open hour, and the hour is less or equal the close hour, then just alert “We’re currently open!” So alert is just a built-in JavaScript function so that you should be familiar with. Maybe we’ll just use this here as a demonstration that we can write some simple JavaScript in here. So alert, “Sorry, we’re closed”. And here we need some double quotes like this. And here we have some bug. So probably JavaScript wants us to include the semicolon here. And there it is. So “sorry, we are closed”, and that’s because right now it is nine in the morning and you saw that it happened here twice. And that’s because of the strict mode that I was telling you before. So in strict mode, our components are usually rendered twice and so that’s why we got that alert twice as well.

Now, if we change the open hour here, let’s say to eight and re-render, then it says “We are currently open!” All right, now, this alert function is actually blocking JavaScript. And so that’s why it runs in the beginning but nothing else happens. And so of course this is really not ideal, and we wouldn’t use this in a real app, but this was just a short demo here anyway. So let’s just comment all of this out and just to use this code here because it will actually become useful later. Let’s create a variable here called isOpen. So that will then simply become a true or false value depending on whether this condition is true or false. Let’s lock that then to the console, like this.

Wow, what’s happening here? Yeah, that’s better. And you see that right now it’s open. Let’s set that back 12th, and there we go.

BONUS;

import React from "react";
import ReactDOM from "react-dom/client";

// const pizzaData = [
//   {
//     name: "Focaccia",
//     ingredients: "Bread with italian olive oil and rosemary",
//     price: 6,
//     photoName: "pizzas/focaccia.jpg",
//     soldOut: false,
//   },
//   {
//     name: "Pizza Margherita",
//     ingredients: "Tomato and mozarella",
//     price: 10,
//     photoName: "pizzas/margherita.jpg",
//     soldOut: false,
//   },
//   {
//     name: "Pizza Spinaci",
//     ingredients: "Tomato, mozarella, spinach, and ricotta cheese",
//     price: 12,
//     photoName: "pizzas/spinaci.jpg",
//     soldOut: false,
//   },
//   {
//     name: "Pizza Funghi",
//     ingredients: "Tomato, mozarella, mushrooms, and onion",
//     price: 12,
//     photoName: "pizzas/funghi.jpg",
//     soldOut: false,
//   },
//   {
//     name: "Pizza Salamino",
//     ingredients: "Tomato, mozarella, and pepperoni",
//     price: 15,
//     photoName: "pizzas/salamino.jpg",
//     soldOut: true,
//   },
//   {
//     name: "Pizza Prosciutto",
//     ingredients: "Tomato, mozarella, ham, aragula, and burrata cheese",
//     price: 18,
//     photoName: "pizzas/prosciutto.jpg",
//     soldOut: false,
//   },
// ];

function App() {
  return (
    <div>
      <Header />
      <Menu />
      <Footer />
    </div>
  );
}

function Header() {
  return <h1> Fast React Pizza Co. </h1>;
}

function Menu() {
  return (
    <div>
      <h2>Our Menu</h2>
      <Pizza />
      <Pizza />
      <Pizza />
      <Pizza />
    </div>
  );
}

function Footer() {
  const hour = new Date().getHours();
  const openHour = 8;
  const closeHour = 22;
  const isOpen = hour >= openHour && hour <= closeHour;
  console.log(isOpen);
  return (
    <footer>{new Date().toLocaleTimeString()}. We're currently open</footer>
  );

  // React.createElement("footer",null,"We're currently open" )
}

function Pizza() {
  return (
    <div>
      <img src="pizzas/spinaci.jpg" alt="Pizza spinaci"></img>
      <h2> Pizza Spinaci</h2>
      <p>Tomato, mozarella, spinach, and ricotta cheese</p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);